<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Báo cáo lưu lượng
            </ui:define>

            <ui:define name="content">
                <h:form>
                    <h:panelGrid columns="2">
                        Từ: <p:calendar value="#{trafficReportBean.startTime}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                        required="true" requiredMessage="Bạn chưa chọn ngày bắt đầu"/> 
                        Đến: <p:calendar value="#{trafficReportBean.endTime}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                         required="true" requiredMessage="Bạn chưa chọn ngày kết thúc"/> 
                        Dịch vụ: 
                        <p:selectOneMenu value="#{trafficReportBean.service}">
                            <f:selectItem itemLabel="Cầu - CAU" itemValue="cau"/>
                            <f:selectItem itemLabel="Soi - S2" itemValue="soi"/>
                            <f:selectItem itemLabel="Nuôi - N2" itemValue="nuoi"/>
                            <f:selectItem itemLabel="Kết - K2" itemValue="ket"/>
                            <f:selectItem itemLabel="Độc đắc - DD" itemValue="docdac"/>
                            <f:selectItem itemLabel="X2" itemValue="x2"/>
                            <f:selectItem itemLabel="B" itemValue="b2"/>
                            <f:selectItem itemLabel="BW" itemValue="bw"/>
                            <f:selectItem itemLabel="Tip" itemValue="tip"/>
                            <f:selectItem itemLabel="KQXS" itemValue="kqxs"/>
                        </p:selectOneMenu>
                        Đầu số: 
                        <p:selectOneMenu value="#{trafficReportBean.cpNumber}">
                            <f:selectItem itemLabel="6071" itemValue="6071"/>
                            <f:selectItem itemLabel="6171" itemValue="6171"/>
                            <f:selectItem itemLabel="6271" itemValue="6271"/>
                            <f:selectItem itemLabel="6371" itemValue="6371"/>
                            <f:selectItem itemLabel="6471" itemValue="6471"/>
                            <f:selectItem itemLabel="6571" itemValue="6571"/>
                            <f:selectItem itemLabel="6671" itemValue="6671"/>
                            <f:selectItem itemLabel="6771" itemValue="6771"/>
                        </p:selectOneMenu>
                    </h:panelGrid>

                    <p:commandButton ajax="false" action="#{trafficReportBean.viewReport()}" value="Xem báo cáo"/>

                    <br/>
                    <br/><br/>

<!--                    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>-->

                    <h:form rendered="#{trafficReportBean.trafficReports.size() > 0}">
                        <p:dataTable id="ketResult" value="#{trafficReportBean.trafficReports}" var="item" 
                                     paginator="#{trafficReportBean.trafficReports.size() >20}" rows="20" >

                            <f:facet name="header">  
                                Báo cáo lưu lượng dịch vụ #{trafficReportBean.service} đầu số #{trafficReportBean.cpNumber} từ 
                                <h:outputText value="#{trafficReportBean.startTime}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Saigon"/>
                                </h:outputText>
                                đến 
                                <h:outputText value="#{trafficReportBean.endTime}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Saigon"/>
                                </h:outputText>
                            </f:facet> 

                            <p:column headerText="Ngày" sortBy="#{item.dateString}" filterBy="#{item.dateString}" filterMatchMode="contains">
                                #{item.dateString}
                            </p:column>
                            <p:column headerText="Lượng tin nhắn lên" sortBy="#{item.totalMessage}">
                                #{item.totalMessage}
                            </p:column>
                        </p:dataTable>
                    </h:form>

                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
